<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-finished" size="mini" @click="handleSetMsgReaded">全部设为已读</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="消息类型" align="center" prop="cnname" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">系统消息</span>
          <span v-if="scope.row.type == 2">事件消息</span>
          <span v-if="scope.row.type == 3">处置消息</span>
          <span v-if="scope.row.type == 4">演练情景消息</span>
        </template>
      </el-table-column>
      <el-table-column label="消息内容" align="left" prop="enname">
        <template slot-scope="scope">
          {{ scope.row.message }}
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" prop="createTime">
      </el-table-column>
      <el-table-column label="已读状态" align="center" prop="adiatacode" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" size="mini">未读</el-tag>
          <el-tag type="success" v-if="scope.row.status == 1" size="mini">已读</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="setReaded(scope.row)">设为已读</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <msg-detail ref="msgDetail" />
  </div>
</template>
<script>
import MsgDetail from './components/MsgDetail.vue'
import * as MsgApi from '@/api/msg/message';

export default {
  name: 'MessageList',
  components: { MsgDetail },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      loading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      MsgApi.getMessageList(this.queryParams).then(res => {
        console.log(res);
        this.total = res.total;
        res.rows.forEach(element => {
          element.type = Number(element.type)
        });
        this.list = res.rows;
      })
    },
    showDetail(data) {
      this.$refs.msgDetail.showDetail(data);
    },
    setReaded(data) {
      let msgIndex = this.list.findIndex(val => val.messageId == data.messageId);
      MsgApi.setMessageReaded({ messageId: data.messageId, status: 1 }).then(res => {
        this.$modal.msgSuccess('消息已设为已读');
        let msg = this.list[msgIndex];
        msg.status = 1;
        this.$set(this.list, msgIndex, msg);
      })
    },
    handleSetMsgReaded() {
      MsgApi.setMessageAllReaded().then(res => {
        this.$modal.msgSuccess('消息已全部设为已读');
        this.getList();
      })
    }
  },
}
</script>
<style lang="scss" scoped>

</style>